<template>
    <div>
        <a-form :form="form" id="update-form" :hideRequiredMark = 'true'>
            <div class="header">
                <h3>一、基本信息</h3>
                <div class="operate">
                    <div>
                        <transition name="slide-fade">
                            <a-button type="primary" @click="returned" v-show="!disabled">还原默认</a-button>
                        </transition>
                        <a-button type="primary" v-if="disabled" @click="updateProductCate">修改</a-button>
                        <a-button type="primary" @click="onSubmit" v-else>保存修改</a-button>
                    </div>
                </div>
            </div>
            <a-row :gutter='10' class="form-main-content">
                <a-col :key="1" :span="8" class="form-item">
                    <a-form-item label="分类名称">
                        <div v-if="disabled">{{data.name}}</div>
                        <a-input placeholder="分类名称" v-if="!disabled" v-decorator="[
                            'name',
                           {rules: [{ required: true, message: '请输入分类名称' }], initialValue: data.name}
                        ]"/>
                    </a-form-item>
                </a-col>
                <a-col :key="2" :span="8" class="form-item">
                    <a-form-item label="计算参数">
                        <div v-if="disabled">{{param}}</div>
                        <a-select v-if="!disabled" v-decorator="['param', {initialValue: data.param}]">
                            <a-select-option v-for="(v, k) in counts" :value="k">
                                {{v}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :key="4" :span="8" class="form-item">
                    <a-form-item label="状态">
                        <div v-if="disabled">{{parseInt(data.status) === 0 ? '停用' : '可用'}}</div>
                        <a-select v-if="!disabled" v-decorator="['status', {initialValue: data.status}]">
                            <a-select-option :value="1">
                                可用
                            </a-select-option>
                            <a-select-option :value="0">
                                停用
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :key="3" :span="24" class="form-item">
                    <a-form-item label="图片">
                        <div v-if="disabled"><img :src="data.img" style="width:100px; height:100px" alt=""></div>
                        <a-upload
                                v-if="!disabled"
                                name="image"
                                listType="picture-card"
                                class="avatar-uploader"
                                :showUploadList="false"
                                :customRequest="uploadFunc"
                                :beforeUpload="beforeUpload"
                                @change="handleChange"
                                v-decorator="['img']"
                        >
                            <img v-if="image_url" :src="image_url" style="width:100px; height:100px" alt="图片">
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'"/>
                            </div>
                        </a-upload>
                    </a-form-item>
                </a-col>
                <a-col :key="5" :span="24" class="form-item">
                    <a-form-item label="备注">
                        <a-textarea v-if="!disabled"
                                rows="4"
                                placeholder="请输入备注"
                                v-decorator="['remark', {initialValue: data.remark}]"/>
                        <div v-if="disabled">{{data.remark ? data.remark : '无'}}</div>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
    import {getBase64} from "@/utils/ImageBase64";

    export default {
        data() {
            return {
                menus: [],
                id: 0,
                form: this.$form.createForm(this),
                image_url: '',
                loading: false,
                uploadFunc: file => {
                    this.upload(file);
                },
                disabled: true,
                counts: [],
                data: []
            }
        },
        computed: {
            param: function () {
                return this.counts[this.data.param]
            }
        },
        methods: {
            onSubmit(form) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values.img = this.image_url;
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.data = {...this.data, ...values};
                                this.disabled = true
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            async postData(param) {
                return await this.http('put', 'goodscate/update?id=' + this.id, param);
            },
            async getDetail(id) {
                return await this.http('get', 'goodscate/view', {id: id});
            },
            beforeUpload(file) {
                const typeB = file.type == "image/jpeg" || file.type == "image/png";
                if (!typeB) {
                    this.$message.error("请选择jpg,png格式的图片");
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!");
                }
                return typeB && isLt2M;
            },
            handleChange(info) {
                if (info.file.status === "uploading") {
                    this.loading = true;
                    return;
                }
                if (info.file.status === "done") {
                    this.loading = true;
                    this.upload(info);
                }
            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64}).then(res => {
                        this.image_url = res.imgurl;
                        this.loading = false;
                    });
                });
            },
            updateProductCate() {
                this.disabled = false
            },
            edit() {
                this.disabled = false;
            },
            returned() {
                this.image_url = this.data.img;
                let setData = {
                    img: this.data.img,
                    name: this.data.name,
                    param: this.data.param,
                    remark: this.data.remark,
                    status: this.data.status
                };
                this.form.setFieldsValue(setData)
            },
        },
        async mounted() {
            this.id = this.$route.params.id;
            await this.getDetail(this.id).then(res => {
                this.image_url = res.img;
                this.data = res;
            });

            await this.http('get', 'goodscate/counts').then(res => {
                this.counts = res
            })
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .header {
        @include fj();
        margin-bottom: 30px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
